<!doctype html>
<html xmlns:og="http://ogp.me/ns#" ng-app="flexDemo">
  <head>
  	<meta charset="utf-8">
  	<title>CSS Flexbox Please!</title>


  	<meta name="viewport" content="width=device-width, initial-scale=1.0">



  	<link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/angular.js"></script>
    <script src="js/script.js"></script>
    <script type="text/ng-template" id="box-definition.html">
      <h3 ng-mouseenter="box.hoverItem=true" ng-mouseleave="box.hoverItem=false">{{name}}</h3>
      <p class="form">.box div.{{name}} {</p>
      <ul class="form">
        <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/order" target="_blank" title="{{text.orderText}}">order</a>:<input type="number" ng-model="box.order" min="-1" max="10" /></li>
        <li><i ng-class="{'icon-plus':!box.flexOpen, 'icon-minus':box.flexOpen}" ng-click="box.flexOpen=!box.flexOpen"></i> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex" target="_blank" title="{{text.flexText}}">flex</a>: <input type="number" ng-model="box.flexGrow" min="0" ng-disabled="box.flexOpen"/> <input type="number" ng-model="box.flexShrink" min="0" ng-disabled="box.flexOpen"/> <input type="text" ng-model="box.flexBasis" list="flexBasis" ng-disabled="box.flexOpen" />;
          <ul ng-show="box.flexOpen">
            <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow" target="_blank" title="{{text.flexGrowText}}">flex-grow</a>: <input type="number" ng-model="box.flexGrow" min="0"/>;</li>
            <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink" target="_blank" title="{{text.flexShrinkText}}">flex-shrink</a>: <input type="number" ng-model="box.flexShrink" min="0"/>;</li>
            <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis" target="_blank" title="{{text.flexBasisText}}">flex-basis</a>: <input type="text" ng-model="box.flexBasis" list="flexBasis" />;</li>
          </ul>
        </li>
        <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-self" target="_blank" title="{{text.alignSelfText}}">align-self</a>: <select ng-model="box.alignSelf" ng-options="alignSelf for alignSelf in ['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch']"></select>;</li>
        <li>min-width: <input type="text" ng-model="box.minWidth" />;</li>
        <li>min-height: <input type="text" ng-model="box.minHeight" />;</li>
      </ul>
      <p class="form">}</p>
    </script>
  </head>
  <body>
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <span class="brand">CSS Flexbox Please!</span>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="row" ng-controller="FlexboxCtrl">
        <div class="span6 sticky">
          <h3>Output</h3>
          <div class="visual">
            <div class="box" ng-style="model | vendorPrefix" ng-class="{hover:hoverContainer}">
              <div ng-style="box | vendorPrefix" ng-class="{hover:hoverItems||box.hoverItem}" ng-repeat="(name, box) in boxes">{{name}}</div>
            </div>
          </div>
          <div class="btn-group" style="text-align:center;">
            <a class="btn" ng-click="add_box()" ng-disabled="box_list.length==10"><i class="icon-plus"></i> Add box</a>
            <a class="btn" ng-click="remove_box()" ng-disabled="box_list.length==2"><i class="icon-minus"></i> Remove box</a>
          </div>
          <div box-visual style="margin-top:6px;"></div>
          <div>
            <p>* Make sure to check out <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox#Flex_item_considerations" target="_blank">these tips</a>.</p>
          </div>
        </div>
        <div class="span5 row well">
          <div>
            <p>* Click on flexbox values below and edit to see it in action.</p>
            <h3 ng-mouseenter="hoverContainer=true" ng-mouseleave="hoverContainer=false">flex container</h3>
            <p class="form">.box {</p>
            <ul class="form">
              <li>display: flex;</li>
              <li><i ng-class="{'icon-plus':!flexFlowOpen, 'icon-minus':flexFlowOpen}" ng-click="flexFlowOpen=!flexFlowOpen"></i> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-flow" target="_blank" title="{{text.flexFlowText}}">flex-flow</a>: <select ng-model="model.flexDirection" ng-options="flexDirection for flexDirection in ['row', 'row-reverse', 'column', 'column-reverse']" ng-disabled="flexFlowOpen" ></select> <select ng-model="model.flexWrap" ng-options="flexWrap for flexWrap in ['nowrap', 'wrap', 'wrap-reverse']" ng-disabled="flexFlowOpen" ></select>;
                <ul ng-show="flexFlowOpen">
                  <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-direction" target="_blank" title="{{text.flexDirectionText}}">flex-direction</a>: <select ng-model="model.flexDirection" ng-options="flexDirection for flexDirection in ['row', 'row-reverse', 'column', 'column-reverse']"></select>;</li>
                  <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap" target="_blank" title="{{text.flexWrapText}}">flex-wrap</a>: <select ng-model="model.flexWrap" ng-options="flexWrap for flexWrap in ['nowrap', 'wrap', 'wrap-reverse']"></select>;</li>
                </ul>
              </li>
              <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content" target="_blank" title="{{text.justifyContentText}}">justify-content</a>: <select ng-model="model.justifyContent" ng-options="justifyContent for justifyContent in ['flex-start', 'flex-end', 'center', 'space-between', 'space-around']"></select>;</li>
              <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-content" target="_blank" title="{{text.alignContentText}}">align-content</a>: <select ng-model="model.alignContent" ng-options="alignContent for alignContent in ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch']"></select>;</li>
              <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items" target="_blank" title="{{text.alignItemsText}}">align-items</a>: <select ng-model="model.alignItems" ng-options="alignItems for alignItems in ['flex-start', 'flex-end', 'center', 'baseline', 'stretch']"></select>;</li>
            </ul>
            <p class="form">}</p>
          </div>
          <div>
            <h3 ng-mouseenter="hoverItems=true" ng-mouseleave="hoverItems=false">flex item</h3>
            <div ng-repeat="name in box_list" box-definition="name" index="$index" class="box-definition form"></div>

            <datalist id="flexBasis">
              <option value="auto"></option>
              <option value="initial"></option>
              <option value="none"></option>
              <option value="10px"></option>
              <option value="10%"></option>
            </datalist>
          </div>
        </div>
      </div>

    </div> <!-- /container -->

  </body>
</html>